<template>
  <div class="chart-box">
    <div class="chart-title">
      <div class="chart-border"></div>
      <div> 船龄分布</div>
      <div class="chart-border-2"></div>
    </div>
    <div id="myChart6" :style="{ width: '100%', height: '100%' }"></div>
  </div>


</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'VerticalBarChart',
  setup() {
    const state = reactive({
      option: {
      //   title: {
      //   text: '船龄分布',
      //   left: '25%',
      //   textAlign: 'center',
      //   textStyle: {
      //     color: '#fff'
      //   }
      // },
      grid: {
        top:'5%',
        left: '3%',
        right: '20%',
        bottom: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
       // boundaryGap: [0, 0.01],
        splitLine: {     //网格线
          show: false
        },
        show: false
      },
      yAxis: {
        type: 'category',
        data: ['0-5', '6-10', '11-15', '16-20', '20-25'],
        splitLine: {     //网格线
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick:{
          show: false //不显示坐标轴刻度线
        },
        axisLabel: {
          textStyle: {
            color: '#AFC0D5'
          }
        },
      },
      series: [
        {
          type: "pictorialBar",
          symbol: "rect",
          barWidth: 10,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              // barBorderRadius: 5,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#006bea', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00ffff', // 100% 处的颜色
                  },
                ],
              },
            },
          },
          label: {
            show: true,
            formatter: '{c|{c}}',
            position: 'left',
            offset: [200, 0],
            fontSize: 18,
            rich: {
              c: {
                width: 50,
                color: '#ffff',
                textBorderColor: '#43FFFD',
                textBorderWidth: 1,
                fontSize: 14,
                textAlign: 'left'
              }
            }
          },
          symbolRepeat: true,
          symbolSize: 14,
          data: [18203, 23489, 29034, 10497, 13174],
          z: 1,
          animationEasing: "elasticOut",
          // animationDelay: function (dataIndex, params) {
          //   return params.index * 30 * 1.1;
          // },
        },
        {
          type: "pictorialBar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          symbol: "rect",
          itemStyle: {
            normal: {
              color: "#0B1E39",
            },
          },
          barWidth: 10,
          symbolRepeat: true,
          symbolSize: 14,
          data: [100000, 100000, 100000, 100000, 100000],
          barGap: "-100%",
          barCategoryGap: 0,
          label: {
            normal: {
              show: false,
              position: "insideTopRight",
              textStyle: {
                color: "#ffffff",
                fontSize: 20,
              },
              offset: [0, -35],
            },
          },
          z: -100,
          animationEasing: "elasticOut",
          animationDelay: function (dataIndex, params) {
            return params.index * 30;
          },
        }
      ]
    }})
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart6'))
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
}
.chart-title {
  display: flex;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #ffffff;
  line-height: 20px;
  letter-spacing: 0.01px;
  margin-top: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  .chart-border {
    width: 32px;
    height: 1px;
    border: 2px solid;
    border-image: linear-gradient(90deg, rgba(200,200,200,0.00), #008eff 63%, #008eff 98%) 2 2;
    margin-right: 5px;
  }
  .chart-border-2 {
    width: 32px;
    height: 1px;
    border: 2px solid;
    border-image: linear-gradient(-90deg, rgba(200,200,200,0.00), #008eff 63%, #008eff 98%) 2 2;
    margin-left: 5px;
  }
}
</style>
